<template>

    <!-- 查询条件 -->
    <div style="border: 1px solid black; margin: 10px; padding: 10px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="formInline.StationName" clearable />
            </el-form-item>

            <el-form-item label="编码">
                <el-input v-model="formInline.StationCode" clearable />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="StationShow">查询</el-button>
                <el-button type="warning" @click="reset">重置</el-button>
                <el-button type="success" @click="AddData">添加</el-button>
            </el-form-item>
        </el-form>
    </div>

    <!-- 显示 -->
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="50" />

        <el-table-column prop="stationCode" label="编码" width="120" />
        <el-table-column prop="stationName" label="名称" width="120" />
        <el-table-column prop="linepName" label="产线" width="120" />
        <el-table-column prop="processName" label="工序" width="120" />
        <el-table-column prop="stationMsg" label="描述" width="120" />
        <el-table-column prop="addProp" label="创建人" width="120" />
        <el-table-column prop="addTime" label="创建时间" width="200">
            <template #default="script">
                {{ moment(script.row.addTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column prop="updTime" label="更新时间" width="200">
            <template #default="scope">
                {{ scope.row.updTime == null ? "" : moment(scope.row.updTime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="script">
                <el-button link type="primary" size="small" @click="DelStation(script.row.id)">
                    删除
                </el-button>
                <el-button link type="primary" size="small" @click="UpStation(script.row)">
                    修改
                </el-button>
            </template>
        </el-table-column>

    </el-table>

    <!-- 添加 -->
    <el-dialog v-model="AddStation" title="添加工位" width="500">

        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
            <el-form-item label="描述" prop="stationMsg">
                <el-input v-model="ruleForm.stationMsg" :rows="2" type="textarea" />
            </el-form-item>

            <el-form-item label="名称">
                <el-select v-model="ruleForm.stationName" prop="stationName">
                    <!-- <el-option label="Zone one" value="shanghai" /> -->
                    <el-option v-for="a in useDatas" :label="a.userNickname" :value="a.userNickname" />
                </el-select>
            </el-form-item>

            <el-form-item label="所属产线">
                <el-select v-model="ruleForm.linepId" placeholder="选择产线">
                    <el-option v-for="item in stationGet" :Key="item.id" :label="item.lineCode + '/' + item.lineName"
                        :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="工序">
                <el-select v-model="ruleForm.processId" placeholder="选择工序">
                    <el-option v-for="item in ProcessData" :Key="item.id"
                        :label="item.processCode + '/' + item.processName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    添加
                </el-button>
                <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog v-model="UpSatationVis" title="修改工位" width="500">
        <el-form-item label="描述" prop="stationMsg">
            <el-input v-model="UpSatationData.stationMsg" :rows="2" type="textarea" />
        </el-form-item>

        <el-form-item label="名称">
            <el-select v-model="UpSatationData.stationName" prop="stationName">
                <!-- <el-option label="Zone one" value="shanghai" /> -->
                <el-option v-for="a in useDatas" :label="a.userNickname" :value="a.userNickname" />
            </el-select>
        </el-form-item>

        <el-form-item label="所属产线">
            <el-select v-model="UpSatationData.linepId" placeholder="选择产线">
                <el-option v-for="item in stationGet" :Key="item.id" :label="item.lineCode + '/' + item.lineName"
                    :value="item.id" />
            </el-select>
        </el-form-item>

        <el-form-item label="工序">
            <el-select v-model="UpSatationData.processId" placeholder="选择工序">
                <el-option v-for="item in ProcessData" :Key="item.id" :label="item.processCode + '/' + item.processName"
                    :value="item.id" />
            </el-select>
        </el-form-item>

        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="StationManageUpd">
                    修改
                </el-button>
            </div>
        </template>

    </el-dialog>

</template>

<script lang="ts" setup>
import Maxios from '@/Http/MesHelp'
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { useData } from 'element-plus/es/components/table-v2/src/composables/use-data.mjs'
import { fa } from 'element-plus/es/locales.mjs'

const Page = reactive({
    PageIndex: 1,
    PageSize: 1000
})
const formInline = reactive({
    StationCode: '',
    StationName: ''
})


//显示
const tableData = ref([])
const reset = () => {
    formInline.StationCode = "";
    formInline.StationName = "";
    StationShow()
}
const StationShow = () => {
    Maxios.get("/api/factory/StationManageShow", {
        params:
        {
            PageIndex: Page.PageIndex, PageSize: Page.PageSize,
            StationCode: formInline.StationCode, StationName: formInline.StationName
        }
    }).then(res => {
        console.log(res.data.data.list)
        tableData.value = res.data.data.list
        console.log(res.data.data.list)
    })
}

//删除
const DelStation = (id: any) => {
    ElMessageBox.confirm(
        '你确定要删除吗?',
        '删除警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // ElMessage({
            //     type: 'success',
            //     message: 'Delete completed',
            // })

            Maxios.post("/api/factory/StationManageDel", { id: id }).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("删除成功");
                    StationShow()
                }
                else {
                    ElMessage.success("删除失败");
                    StationShow()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '您取消了删除',
            })
        })
}


//添加方法
const AddStation = ref(false)
const AddData = () => {
    //alert("asdasdasd");
    AddStation.value = true
}
const User = reactive({
    Name: localStorage.getItem("userNickname") || ''
})
interface RuleForm {
    stationName: string
    stationMsg: string
    linepId: any
    processId: any
    addProp: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    stationName: '',
    stationMsg: '',
    linepId: '',
    processId: '',
    addProp: User.Name
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    stationName: [
        { required: true, message: '请选择名称', trigger: 'blur' },
    ],
    stationMsg: [
        { required: true, message: '描述不能为空', trigger: 'change', },
    ],
    linepId: [
        { required: true, message: '请选择产线', trigger: 'change', },
    ],
    processId: [
        { required: true, message: '请选择工序', trigger: 'change', },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')

            Maxios.post("/api/factory/StationManageAdd", ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage.success("添加成功")
                    AddStation.value = false
                    StationShow()
                }
                else {
                    ElMessage.error("添加失败")
                    AddStation.value = false
                    StationShow()
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
    value: `${idx + 1}`,
    label: `${idx + 1}`,
}))


// 搜索表单 绑定名称
const UserGet = reactive({
    "userName": "",
    "roleId": 7,
    "departmentId": 0,
    "page": 1,
    "size": 50
})
const useDatas = ref([{
    userNickname: ""
}])
const loadUserList = () => {
    Maxios.post("/api/User/GetUserList", UserGet).then(res => {
        useDatas.value = res.data.data.list


    })
}

//绑定产线
const stationGet = ref([{
    id: '',
    lineCode: '',
    lineName: ''
}])
const StationGetData = () => {
    Maxios.get("/api/factory/StationManageGet").then(res => {
        stationGet.value = res.data.data
        console.log(stationGet.value)
    })
}

//绑定工序
const procePage = reactive({
    PageIndex: 1,
    PageSize: 100  
})
const ProcessData = ref([])
const GetProcess = () => {
    Maxios.get("/api/Process/GetProcess", {
        params: {
            PageIndex: procePage.PageIndex, PageSize: procePage.PageSize
        }
    }).then(res => {
        ProcessData.value = res.data.data.list
        console.log(ProcessData.value)
    })
}

//修改
const UpSatationVis = ref(false)
const UpSatationData = reactive({
    id: '',
    stationCode: '',
    stationName: '',
    stationMsg: '',
    linepId: '',
    processId: ''
})
const UpStation = (data: any) => {
    UpSatationData.id = data.id
    UpSatationData.stationCode = data.stationCode
    UpSatationData.stationName = data.stationName
    UpSatationData.stationMsg = data.stationMsg
    UpSatationData.linepId = data.linepId
    UpSatationData.processId = data.processId
    UpSatationVis.value = true
    console.log()
}

const StationManageUpd = () => {
    Maxios.post("/api/factory/StationManageUpd", UpSatationData).then(res => {
        if (res.data.code == 200) {
            ElMessage.success("修改成功")
            UpSatationVis.value = false
            StationShow()
        }
        else {
            ElMessage.success("修改失败")
            UpSatationVis.value = false
            StationShow()
        }
    })
}


onMounted(() => {
    StationGetData() //绑定产线
    loadUserList()//绑定名称
    GetProcess()//绑定工序
    StationShow()//显示
})

</script>
